<template>
  <div class="flex-col page">
    <div class="flex-col section">
      <c-title :hide="false" text="团队人数"></c-title>
    </div>
    <div class="flex-row items-baseline group_2">
      <span @click="changeTabs(index)" class="tabs-item" :class="current == index ? 'text' : 'text_2'" v-for="(item, index) in tabsList" :key="index">{{ item }}</span>
      <!-- <span class="text ">团队用户</span> -->
    </div>
    <div class="flex-col group_3">
      <!-- <div class="self-start section_3"></div> -->
      <div class="flex-col justify-start self-stretch section_4">
        <div class="flex-row justify-between items-center section_5">
          <span class="font_2 text_3">{{current == 0 ? '总直推人数' : '总团队人数'}}{{ countNum }}</span>
          <span class="font_2 text_4">{{current == 0 ? '有效直推人数' : '有效团队人数'}}{{ countNumValid }}</span>
        </div>
      </div>
    </div>
    <div class="flex-row group_4">
      <img class="image_5" src="https://shops.cg500.com/static/huanniu-er-h5-teamNum-icon.png" />
      <span class="ml-6 font">数据列表</span>
    </div>
    <div class="flex-col list">
      <div class="flex-col list-item mt-11-5" v-for="(item, index) in list" :key="index">
        <div class="grid1 mt-6-5">
          <div class="flex-col grid-item">
            <div class="flex-row items-center self-stretch">
              <div class="section_7"></div>
              <span class="font_3 ml-4-5">姓名</span>
            </div>
            <div class="self-start group_5 mt-9">
              <span class="font_6">{{ item.realname ? item.realname : '--' }}</span>
              <!-- <span class="font_7">.00</span> -->
            </div>
          </div>
          <div class="flex-col grid-item_2">
            <div class="flex-row items-center self-stretch">
              <div class="section_7"></div>
              <span class="font_3 text_8 ml-2-5">id</span>
            </div>
            <div class="self-start group_6 mt-8-5">
              <span class="font_6">{{ item.uid }}</span>
              <!-- <span class="font_7">.00</span> -->
            </div>
          </div>
        </div>
        <div class="flex-row">
          <div class="flex-col items-start section_6 equal-division-item">
            <span class="font_3">级别</span>
            <span class="font_4 text_5 mt-9">{{item.level}}</span>
          </div>
          <div class="flex-col items-start section_6 equal-division-item ml-6-5">
            <span class="font_3">账号</span>
            <span class="font_5 text_6 mt-8-5">{{item.login_name}}</span>
          </div>
          <div class="flex-col items-start section_6 equal-division-item ml-6-5">
            <span class="font_3">电话</span>
            <span class="font_4 text_7 mt-10-5">{{item.mobile}}</span>
          </div>
        </div>
        <div class="grid mt-6-5">
          <div class="flex-col grid-item">
            <div class="flex-row items-center self-stretch">
              <div class="section_7"></div>
              <span class="font_3 ml-4-5">已分红</span>
            </div>
            <div class="self-start group_5 mt-9">
              <span class="font_6">{{ item.is_dividend }}</span>
              <!-- <span class="font_7">.00</span> -->
            </div>
          </div>
          <div class="flex-col grid-item_2">
            <div class="flex-row items-center self-stretch">
              <div class="section_7"></div>
              <span class="font_3 text_8 ml-2-5">再次复购额度</span>
            </div>
            <div class="self-start group_6 mt-8-5">
              <span class="font_6">{{ item.dividend_limit }}</span>
              <!-- <span class="font_7">.00</span> -->
            </div>
          </div>
          <div class="flex-col grid-item">
            <div class="flex-row items-center self-stretch">
              <div class="section_8"></div>
              <span class="ml-2 font_3 text_9">个人销量单量</span>
            </div>
            <span class="self-start font_6 text_11 mt-8-5">{{ item.person }}</span>
          </div>
          <div class="flex-col grid-item_3">
            <div class="flex-row items-center self-stretch">
              <div class="section_9"></div>
              <span class="ml-4 font_3 text_10">团队销量单量</span>
            </div>
            <span class="self-start font_6 text_12 mt-8-5">{{ item.team }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import teamNumController from "./teamNumController";

export default teamNumController;
</script>
  <style>
body {
    background: #fff;
  }
</style>
  
  <style lang="scss" rel="stylesheet/scss" scoped>
  
::v-deep .van-nav-bar {
  border-bottom: none !important;
  background: rgba(0, 0, 0, 0) !important;
}
::v-deep .van-button--default {
  background: none !important;
}
::v-deep .van-nav-bar__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #151515 !important;
}
//   @import "../common/common.css";
@import "../../../assets/css/commoncss/common.css";
.ml-20-5 {
  margin-left: 1.28rem;
}
.ml-6-5 {
  margin-left: 0.41rem;
}
.mt-6-5 {
  margin-top: 0.41rem;
}
.ml-2-5 {
  margin-left: 0.16rem;
}
.ml-4-5 {
  margin-left: 0.28rem;
}
.mt-11-5 {
  margin-top: 0.72rem;
}
.mt-10-5 {
  margin-top: 0.66rem;
}
.mt-8-5 {
  margin-top: 0.53rem;
}
.mt-9 {
  margin-top: 0.56rem;
}

.page {
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  padding: 0.63rem 0.63rem;
  background-image: linear-gradient(0deg, #ffffff 0%, #f1f6ff 100%);
}
.image {
  margin-left: 1.25rem;
  margin-right: 0.47rem;
  width: 20.47rem;
  height: 0.75rem;
}
.group {
  margin-top: 1.5rem;
}
.image_2 {
  width: 0.63rem;
  height: 1.09rem;
}
// .pos_2 {
//   position: absolute;
//   left: 0;
//   top: 50%;
//   transform: translateY(-50%);
// }
.section_2 {
  padding: 0.44rem 0.84rem;
  border-radius: 1rem;
  background-image: url("https://ide.code.fun/api/image?token=673439e29be4a6001162970f&name=2ecb615fb88fdeaa61a596f15a5ee611.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 5.47rem;
}
// .pos {
//   position: absolute;
//   right: 0.66rem;
//   top: 2.94rem;
// }
.image_3 {
  width: 1.94rem;
  height: 1.19rem;
}
.image_4 {
  width: 1.09rem;
  height: 1.09rem;
}
.group_2 {
  padding: 0 1.25rem;
}
.tabs-item:first-child {
  margin-right: 1.28rem;
}
.text {
  color: #222222;
  font-size: 1.5rem;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 1.41rem;
  position: relative;
}
.text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  background-image: linear-gradient(0deg, #2375ff 0%, #47b1ff 100%);
  border-radius: 0.13rem;
  width: 1.5rem;
  height: 0.25rem;
}
.text_2 {
  color: #7d7e84;
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.81rem;
}
.group_3 {
  margin-top: 0.5rem;
}
.section_3 {
  margin-left: 3rem;
  background-image: linear-gradient(0deg, #2375ff 0%, #47b1ff 100%);
  border-radius: 0.13rem;
  width: 1.5rem;
  height: 0.25rem;
}
.section_4 {
  padding: 1rem 0 0.84rem;
  background-image: linear-gradient(0deg, #ffffff 0%, #eef2f7 100%);
}
.section_5 {
  margin: 0 0.94rem;
  padding: 0.69rem 0.53rem 0.69rem 0.66rem;
  background-image: linear-gradient(90deg, #2375ff 0%, #47b1ff 100%);
  border-radius: 0.5rem;
}
.font_2 {
  font-size: 0.81rem;
  font-family: PingFang SC;
  color: #ffffff;
}
.text_3 {
  line-height: 0.78rem;
}
.text_4 {
  line-height: 0.63rem;
}
.group_4 {
  margin-top: 0.28rem;
  padding: 0 0.91rem;
}
.image_5 {
  width: 1.22rem;
  height: 1.09rem;
  margin: 0;
}
.font {
  font-size: 1.13rem;
  font-family: PingFang SC;
  line-height: 1.06rem;
  font-weight: 500;
  color: #222222;
}
.list {
  margin-top: 0.91rem;
  padding: 0 0.94rem;
}
.list-item {
  padding: 0.63rem 0.88rem;
  background-color: #f2f3f7;
  border-radius: 0.5rem;
}
.list-item:first-child {
  margin-top: 0;
}
.section_6 {
  flex: 1 1 6.31rem;
}
.equal-division-item {
  padding: 0.88rem 0.56rem;
  background-color: #ffffff;
  border-radius: 0.25rem;
  min-height: 3.69rem;
}
.font_4 {
  font-size: 0.81rem;
  font-family: PingFang SC;
  line-height: 0.66rem;
  font-weight: 500;
  color: #222222;
}
.text_5 {
  font-size: 0.78rem;
//   line-height: 0.63rem;
word-break: break-all;
}
.font_5 {
  font-size: 1rem;
  font-family: D-DIN;
  line-height: 0.66rem;
  color: #222222;
}
.text_6 {
    // word-break: break-all;
//   line-height: 0.63rem;
}
.text_7 {
//   line-height: 0.63rem;
// word-break: break-all;
}
.grid {
  min-height: 7.78rem;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 0.47rem;
  column-gap: 0.41rem;
}
.grid1 {
  // min-height: 7.78rem;
  display: grid;
  // grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 0.47rem;
  column-gap: 0.41rem;
  margin-bottom: 0.41rem;
}
.grid-item {
  padding: 0.88rem 0.63rem;
  background-color: #ffffff;
  border-radius: 0.25rem;
}
.section_7 {
  background-color: #297adb;
  border-radius: 0.072rem;
  width: 0.16rem;
  height: 0.47rem;
}
.group_5 {
  margin-left: 0.28rem;
  line-height: 0.72rem;
}
.font_6 {
  font-size: 1rem;
  font-family: D-DIN;
  line-height: 0.72rem;
  color: #222222;
  word-break: break-all;
}
.font_7 {
  font-size: 0.69rem;
  font-family: D-DIN;
  line-height: 0.53rem;
  color: #222222;
}
.grid-item_2 {
  padding: 0.88rem 0.66rem;
  background-color: #ffffff;
  border-radius: 0.25rem;
}
.group_6 {
  margin-left: 0.19rem;
  line-height: 0.72rem;
}
.section_8 {
  background-color: #744bfa;
  border-radius: 0.072rem;
  width: 0.16rem;
  height: 0.5rem;
}
.text_11 {
  margin-left: 0.53rem;
  line-height: 0.75rem;
}
.grid-item_3 {
  padding: 0.88rem 0.72rem;
  background-color: #ffffff;
  border-radius: 0.25rem;
}
.section_9 {
  background-color: #744bfa;
  border-radius: 0.072rem;
  width: 0.19rem;
  height: 0.5rem;
}
.font_3 {
  font-size: 0.69rem;
  font-family: PingFang SC;
  line-height: 0.66rem;
  color: #545963;
}
.text_9 {
  line-height: 0.69rem;
}
.text_8 {
  line-height: 0.69rem;
}
.text_10 {
  line-height: 0.69rem;
}
.text_12 {
  margin-left: 0.38rem;
  line-height: 0.75rem;
}
.group_8 {
  width: 19.84rem;
  height: 0.31rem;
  border-left: solid 9.75rem #ffffff;
  border-right: solid 9.75rem #ffffff;
}
// .pos_3 {
//   position: absolute;
//   left: 50%;
//   top: 50.47rem;
//   transform: translateX(-50%);
// }
</style>
  